<template>
    <div class="sidebar-content sidebar-content-show-archive">
        <div class="sidebar-archive">
            <div class="total-archive">
                There are {{ total }} posts in total till now.
            </div>
            <div class="post-archive-warp">
                <div class="post-archive">
                    <div
                        class="archive-single border-warp"
                        v-for="(item, index) in data"
                        :key="index"
                    >
                        <div class="archive-year">{{ item.time }}</div>
                        <ul class="year-list">
                            <li
                                class="archive-post-item"
                                v-for="(ele, index) in item.data"
                                :key="index"
                            >
                                <span class="archive-post-date">{{
                                    ele.schedule
                                }}</span
                                ><span
                                    class="archive-post-title"
                                    @click="toBlog(ele.id)"
                                    >{{ ele.title }}</span
                                >
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { queryArchives } from '@/api/index'
export default {
    data() {
        return {
            data: [],
            total: 0,
        }
    },
    watch: {},
    computed: {},
    methods: {
        async getData() {
            let set = new Set()
            const r = await queryArchives()
            this.total = r.data.length
            console.log(r, 'r')
            // 存储年限
            for (let i of r.data) {
                set.add(i.year)
            }

            let yearData = r.data.map((e) => {
                return e.year
            })
            // 去重之后的年份数组
            let years = [...new Set(yearData)]

            // 创建存放对象的数组
            let result = []
            for (let i of years) {
                result.push({
                    time: i,
                    data: [],
                })
            }
            // 添加数据到result中去
            for (let i of r.data) {
                Object.assign(i, {
                    schedule: new Date(parseInt(i.createDate) + 8 * 3600 * 1000)
                        .toJSON()
                        .substr(5, 5)
                        .replace('-', '/'),
                })
                const index = yearData.indexOf(i.year)
                result[index].data.push(i)
            }

            this.data = result
            sessionStorage.setItem('ARCHIVE_LIST', JSON.stringify(result))
        },
        toBlog(id) {
            this.$router.push({
                name: 'blog',
                params: {
                    id,
                },
            })
        },
    },
    created() {
        const archiveList = JSON.parse(sessionStorage.getItem('ARCHIVE_LIST'))
        if (archiveList !== null) {
            this.data = archiveList
        } else {
            this.getData()
        }
    },
}
</script>
<style lang="less" scoped>
@keyframes clockin-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.sidebar-archive {
    .total-archive {
        text-align: center;
        background-color: #f8f8fe;
        padding: 20px;
        margin-bottom: 20px;
    }

    .post-archive {
        display: flex;
        flex-direction: column;
        align-items: center;

        .archive-single {
            display: flex;
            width: 100%;
            padding: 25px;
            justify-content: flex-start;
            animation: clockin-fade 0.6s ease-out 1 forwards;

            &:not(:last-child) {
                margin-bottom: 20px;
            }
            .archive-year {
                color: #39aa56;
                font-weight: 700;
                // margin: 10px 20px;
            }

            .archive-year::before {
                content: '\e61d';
                font-family: 'iconfont';
                margin-right: 6px;
                vertical-align: baseline;
            }

            .year-list {
                padding: 4px 8px;
                margin-left: 10px;

                .archive-post-item {
                    padding: 10px 0;
                    cursor: pointer;
                    .archive-post-date {
                        font-size: 16px;
                        font-family: 'Oswald-Regular', 'Microsoft Yahei',
                            'Source Sans Pro', Arial, sans-serif;
                        color: #c7c7c7;
                        padding-right: 10px;
                        // border-right: 1px solid #39aa56;
                    }

                    .archive-post-title {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 980px) {
    .archive-single {
        flex-direction: column;
        padding: 15px !important;
        .archive-year {
            margin-bottom: 10px;
        }
        .year-list {
            margin-left: 4px !important;
        }
    }
    .img-warp {
        height: 120px;
    }
}
</style>
